<template>
  <div class="control-button">
    <!-- <el-button v-if="aboutVisible" class="control-el-button" link @click="settingHandle">
      计时
    </el-button> -->

    <el-button v-if="aboutVisible" class="control-el-button" link @click="openSettingHandle">
      {{ isOpenSettingWindow ? '关闭' : '设置' }}
    </el-button>

    <el-divider v-if="aboutVisible" direction="vertical" />
    <el-button v-if="minVisible" class="control-el-button" link @click="minHandle">
      <el-icon>
        <Minus />
      </el-icon>
    </el-button>
    <!-- <el-button v-if="maxVisible" class="control-el-button" link @click="maxHandle">
      <i v-if="isMaximized" class="iconfont icon-window-restore"></i>
      <i v-else class="iconfont icon-chuangkou_zuidahua_"></i>
    </el-button> -->
    <el-button class="control-el-button close" link @click="closeHandle">
      <el-icon>
        <Close />
      </el-icon>
    </el-button>
  </div>
</template>

<script setup>
import { appWindow, WebviewWindow } from '@tauri-apps/api/window';
// import { WebviewWindow } from "@tauri-apps/api/window"; //引入打开窗口功能
import { listen } from '@tauri-apps/api/event'
import { onMounted, ref } from 'vue'

const props = defineProps({
  minVisible: {
    type: Boolean,
    default: () => true,
  },
  maxVisible: {
    type: Boolean,
    default: () => true,
  },
  aboutVisible: {
    type: Boolean,
    default: () => false,
  },
})
const isMaximized = ref(false);

const isOpenSettingWindow = ref(false); //默认不打开设置窗口 2024.4.14

//打开设置窗口
const openSettingHandle = async () => {
  isOpenSettingWindow.value = !isOpenSettingWindow.value;
  if (isOpenSettingWindow.value) {
    // console.log('开始创建设置窗口', appWindow);

    // 获取当前窗口信息
    const currentWinPosition = await appWindow.innerPosition(); //获取窗口方法1
    // console.log('position', currentWinPosition.x);

    // 获取窗口方法2
    // const factor = await appWindow.scaleFactor();
    // const logical = position.toLogical(factor);
    // console.log('logical', logical);
    // 获取窗口方法2

    // 获取窗口方法3
    // const mainWindow = WebviewWindow.getByLabel('LinyufaCountdownMain');
    // console.log('mainWindow1', mainWindow);
    // let position = await mainWindow.innerPosition();
    // 获取窗口方法3
    // 获取当前窗口信息  

    //打开窗口 Linyufan.comm 2024.4.14
    const webview = new WebviewWindow("settingwindow", {
      url: "/#/setting",
      // 可自行添加属性配置     窗口配置
      decorations: false, // 窗口是否无边框及导航条
      transparent: true, //窗口是否透明
      width: 380,
      height: 600,
      x: currentWinPosition.x + 480,
      y: currentWinPosition.y,
      label: 'settingwindow',
      resizable: false, // 是否支持缩放
      alwaysOnTop: true, // 置顶窗口
      fileDropEnabled: false, // 禁止系统拖放
      visible: true, // 隐藏窗口
    });

    webview.once("tauri://created", function () {
      // 窗口创建成功
      console.log('窗口创建成功');
    });
    webview.once("tauri://error", function (e) {
      // 窗口创建失败
      console.log('窗口创建失败', e);
    });
    //打开窗口                
  } else {
    //关闭设置窗口
    const settingWin = WebviewWindow.getByLabel('settingwindow');
    settingWin.close();//关闭窗口
  }
}

//监视设置窗口
listen('system-event', (event) => {
  // console.log('Received event:', event.payload);
  let e = event.payload;
  isOpenSettingWindow.value = e;
});

//监视窗体最大化和还原状态，修改对应图标
listen('tauri://resize', async () => {
  isMaximized.value = await appWindow.isMaximized()
})

const minHandle = async () => {
  await appWindow.minimize()
}
const maxHandle = async () => {
  await appWindow.toggleMaximize()
}

const closeHandle = async () => {
  //在关掉主窗口前，先关掉设置窗口
  const settingWin = WebviewWindow.getByLabel('settingwindow');
  if (settingWin) {
    settingWin.close();//关闭窗口
  }
  appWindow.close()
  // 采用CloseRequested 处理关闭提示消息，在自定义中调用close关闭窗体并没有触发CloseRequested事件，未确定原因
  // 暂时采用事件 方式实现
  if (appWindow.label == 'LinyufaCountdownMain') {
    appWindow.emit("app-exist", {})
  } else {
    appWindow.close();
  }
}


onMounted(async () => {
  isMaximized.value = await appWindow.isMaximized()
})

// const closeHandle = async () => {
//   if (appWindow.label.indexOf('LinyufaCountdownMain') > -1) {
//     let $el = v3layer({
//       type: 'android',
//       content: '确认退出应用程序吗？',
//       btns: [
//         {
//           text: '最小化托盘',
//           style: 'color:#24c8db',
//           click: () => {
//             appWindow.hide()
//           }
//         },
//         {
//           text: '退出程序',
//           style: 'color:#ff5438',
//           click: async () => {
//             store.commit('LOGOUT')
//             await exit()
//           }
//         }
//       ]
//     })
//   } else {
//     await appWindow.close()
//   }
// }
</script>

<style scoped>
.control-button {
  position: absolute;
  right: 36px;
  top: 5px;
  color: #909399;
}

.el-button {
  background-color: #d4d4d4;
}

.control-el-button {
  color: #909399;
  padding: 5px;

  &:hover {
    background-color: rgba(129, 127, 127, 0.5);
    color: #ffffff;
  }

  &.close:hover {
    background-color: #f56c6c;
    color: #ffffff;
  }
}
</style>
